<template>
  <!--模态框组件-->
  <div class="common-from-dialog">
    <div class="common-dialog">

      <el-dialog
          :append-to-body="true"
          :close-on-click-modal="false"
          :show-close="false"
          :close-on-press-escape="false"
          :title="componentSetOptions.dialogTitle"
          :visible.sync="componentSetOptions.isDialog"
          :top="componentSetOptions.dialogTop"
          :width="componentSetOptions.dialogWidth"
      >
        <el-form
            :model="componentSetOptions.formData"
            :ref="componentSetOptions.formRef"
            :label-width="componentSetOptions.formLabelWidth+'px'"
            :class="[componentSetOptions.formClass]"
            v-loading="componentSetOptions.loading"
        >
          <template v-for="(item,key) in componentSetOptions.formListProp">
            <template v-if="item.show">
              <!--数据不在在json里面-->
              <el-form-item
                  :key="key"
                  :class="item.itemClass"
                  :label="item.label"
                  :prop="item.field"
                  :rules="item.rules"
                  v-if="item.type.slice((item.type.length-4),item.type.length)!=='Json' && item.type!=='titleChild'"
              >
                <!--到镇的下拉 四级联动-->
                <component
                    :is="item.customData.name"
                    :ref="item.ref"
                    :ruleForm="componentSetOptions.formData"
                    :field="item.field"
                    :type="item.customData.type"
                    v-if="item.type==='customAddressCascader'"
                    :rowData="item"
                >
                </component>

                <!--树形选择器-->
                <component
                    :is="item.customData.name"
                    :ref="item.customData.ref"
                    :ruleForm="componentSetOptions.formData"
                    :field="item.field"
                    v-if="item.type==='customRoleTree'"
                    :formData="componentSetOptions"
                >
                </component>

                <!--<component :is="item.moduleName" :formData="formProp"></component>-->

                <!--输入框不在json里面-->
                <el-input
                    v-if="item.type==='input'"
                    :style="{'width':item.width+'px'}"
                    v-model="componentSetOptions.formData[item.field]"
                    :placeholder="'请输入'+item.label"
                    :disabled="item.disabled"
                    clearable
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.formData[item.field],componentSetOptions)"
                />
                <!--文本域不在json里面-->
                <el-input
                    v-if="item.type==='textarea'"
                    :style="{'width':item.width+'px'}"
                    type="textarea"
                    :autosize="{ minRows: item.minRows,maxRows:item.maxRows}"
                    v-model="componentSetOptions.formData[item.field]"
                    :placeholder="'请输入'+item.label"
                    :disabled="item.disabled"
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.formData[item.field],componentSetOptions)"
                />
                <!--单选框不在json里面-->
                <el-radio-group
                    v-if="item.type==='radio'"
                    v-model="componentSetOptions.formData[item.field]"
                    :style="{'width':item.width+'px'}"
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.formData[item.field],componentSetOptions)"
                >
                  <el-radio
                      v-for="(radioItem,radioKey) in item.prop"
                      :key="radioKey"
                      :disabled="item.disabled"
                      :label="radioItem.value"
                  >
                    {{ radioItem.label }}
                  </el-radio>
                </el-radio-group>
                <!--多选框不在json里面-->
                <el-checkbox-group
                    v-if="item.type==='checkbox'"
                    v-model="componentSetOptions.formData[item.field]"
                    :style="{'width':item.width+'px'}"
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.formData[item.field],componentSetOptions)"
                >
                  <el-checkbox
                      v-for="checkboxItem in item.prop"
                      :key="checkboxItem.value"
                      :label="checkboxItem.value"
                      :disabled="item.disabled"
                  >
                    {{ checkboxItem.label }}
                  </el-checkbox>
                </el-checkbox-group>
                <!--下拉框不在json里面-->
                <el-select
                    v-if="item.type==='select'"
                    :style="{'width':item.width+'px'}"
                    v-model="componentSetOptions.formData[item.field]"
                    :placeholder="'请选择'+item.label"
                    :disabled="item.disabled"
                    :filterable="item.filterable"
                    :clearable="item.clearable"
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.formData[item.field],componentSetOptions)"
                >
                  <el-option
                      v-for="selectItem in item.prop"
                      :key="selectItem.value"
                      :label="selectItem.label"
                      :value="selectItem.value"
                  >
                  </el-option>
                </el-select>

                <!--时间选择器-->
                <el-time-picker
                    v-if="item.type==='time'"
                    :style="{'width':item.width+'px'}"
                    v-model="componentSetOptions.formData[item.field]"
                    :placeholder="'请选择'+item.label"
                    :disabled="item.disabled"
                    value-format="timestamp"
                >
                </el-time-picker>

                <!--二个时间选择器不在json里面-->
                <el-date-picker
                    v-if="item.type==='date'"
                    :style="{'width':item.width+'px'}"
                    v-model="componentSetOptions.formData[item.field]"
                    :disabled="item.disabled"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :type="item.dataType"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    clearable
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.formData[item.field],componentSetOptions)"
                >
                </el-date-picker>
                <!--一个时间选择器不在json里面-->
                <el-date-picker
                    v-if="item.type==='oneDate'"
                    :style="{'width':item.width+'px'}"
                    v-model="componentSetOptions.formData[item.field]"
                    :placeholder="'请选择'+item.label"
                    :disabled="item.disabled"
                    :type="item.oneDataType"
                    value-format="timestamp"
                    clearable
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.formData[item.field],componentSetOptions)"
                >
                </el-date-picker>
                <!--文件上传不在json里面 -->
                <common-upload-file
                    v-if="item.type==='uploadFile'"
                    :componentSetOptions="item"
                    :uploadValue="componentSetOptions.formData[item.field]"
                    :style="{'width':item.width+'px'}"
                />
                <!--图片上传不在json里面-->
                <common-upload-img
                    v-if="item.type==='uploadImg'"
                    :componentSetOptions="item"
                    :uploadValue="typeof componentSetOptions.formData[item.field]==='string'?componentSetOptions.formData[item.field]=JSON.parse(componentSetOptions.formData[item.field]):componentSetOptions.formData[item.field]"
                    :style="{'width':item.width+'px'}"
                />
                <!--选择element图标不在json里面-->
                <e-icon-picker
                    v-model="componentSetOptions.formData[item.field]"
                    v-if="item.type==='eIconPicker'"
                />
              </el-form-item>

              <!--数据在json里面-->
              <el-form-item
                  :key="key"
                  :class="item.itemClass"
                  :label="item.label"
                  :prop="item.jsonName+'.'+item.field"
                  :rules="item.rules"
                  v-if="item.type.slice((item.type.length-4),item.type.length)==='Json' && item.type!=='titleChild'"
              >
                <!--输入框在json里面-->
                <el-input
                    v-if="item.type==='inputJson'"
                    :style="{'width':item.width+'px'}"
                    v-model="componentSetOptions.formData[item.jsonName][item.field]"
                    :placeholder="'请输入'+item.label"
                    :disabled="item.disabled"
                    clearable
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.formData[item.jsonName][item.field],componentSetOptions)"
                />
                <!--文本域在json里面-->
                <el-input
                    v-if="item.type==='textareaJson'"
                    :style="{'width':item.width+'px'}"
                    type="textarea"
                    :autosize="{ minRows: item.minRows,maxRows:item.maxRows}"
                    v-model="componentSetOptions.formData[item.jsonName][item.field]"
                    :placeholder="'请输入'+item.label"
                    :disabled="item.disabled"
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.formData[item.jsonName][item.field],componentSetOptions)"
                />
                <!--单选框在json里面-->
                <el-radio-group
                    v-if="item.type==='radioJson'"
                    v-model="componentSetOptions.formData[item.jsonName][item.field]"
                    :style="{'width':item.width+'px'}"
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.formData[item.jsonName][item.field],componentSetOptions)"
                >
                  <el-radio
                      v-for="(radioItem,radioKey) in item.prop"
                      :key="radioKey"
                      :disabled="item.disabled"
                      :label="radioItem.value"
                  >
                    {{ radioItem.label }}
                  </el-radio>
                </el-radio-group>
                <!--多选框在json里面-->
                <el-checkbox-group
                    v-if="item.type==='checkboxJson'"
                    v-model="componentSetOptions.formData[item.jsonName][item.field]"
                    :style="{'width':item.width+'px'}"
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.formData[item.jsonName][item.field],componentSetOptions)"
                >
                  <el-checkbox
                      v-for="checkboxItem in item.prop"
                      :key="checkboxItem.value"
                      :label="checkboxItem.value"
                      :disabled="item.disabled"
                  >
                    {{ checkboxItem.label }}
                  </el-checkbox>
                </el-checkbox-group>
                <!--下拉框在json里面-->
                <el-select
                    v-if="item.type==='selectJson'"
                    :style="{'width':item.width+'px'}"
                    v-model="componentSetOptions.formData[item.jsonName][item.field]"
                    :placeholder="'请选择'+item.label"
                    :disabled="item.disabled"
                    :filterable="item.filterable"
                    :clearable="item.clearable"
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.formData[item.jsonName][item.field],componentSetOptions)"
                >
                  <el-option
                      v-for="selectItem in item.prop"
                      :key="selectItem.value"
                      :label="selectItem.label"
                      :value="selectItem.value"
                  >
                  </el-option>
                </el-select>
                <!--二个时间选择器在json里面-->
                <el-date-picker
                    v-if="item.type==='dateJson'"
                    :style="{'width':item.width+'px'}"
                    v-model="componentSetOptions.formData[item.jsonName][item.field]"
                    :disabled="item.disabled"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :type="item.dataType"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    clearable
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.formData[item.jsonName][item.field],componentSetOptions)"
                >
                </el-date-picker>
                <!--一个时间选择器在json里面-->
                <el-date-picker
                    v-if="item.type==='oneDateJson'"
                    :style="{'width':item.width+'px'}"
                    v-model="componentSetOptions.formData[item.jsonName][item.field]"
                    :placeholder="'请选择'+item.label"
                    :disabled="item.disabled"
                    :type="item.oneDataType"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    clearable
                    @change="HandleUtils.handleParent($parent,item.changeMethod,componentSetOptions.formData[item.jsonName][item.field],componentSetOptions)"
                >
                </el-date-picker>
                <!--文件上传在json里面 -->
                <common-upload-file
                    v-if="item.type==='uploadFileJson'"
                    :componentSetOptions="item"
                    :uploadValue="componentSetOptions.formData[item.jsonName][item.field]"
                    :style="{'width':item.width+'px'}"
                />
                <!--图片上传在json里面-->
                <common-upload-img
                    v-if="item.type==='uploadImgJson'"
                    :componentSetOptions="item"
                    :uploadValue="componentSetOptions.formData[item.jsonName][item.field]"
                    :style="{'width':item.width+'px'}"
                />
                <!--选择element图标在json里面-->
                <e-icon-picker
                    v-model="componentSetOptions.formData[item.jsonName][item.field]"
                    v-if="item.type==='eIconPicker'"
                />
              </el-form-item>

              <!--titleChild组件-->
              <el-form-item
                  :key="key"
                  :class="['form-title-child',item.itemClass]"
              >
                <common-title-child
                    v-if="item.type==='titleChild'"
                    :componentSetOptions="item"
                    :style="{'width':item.width+'px'}"
                />
              </el-form-item>

            </template>
          </template>
        </el-form>
        <div slot="footer" :class="['dialog-footer',componentSetOptions.dialogBut.class]">
          <template v-for="(itemOperate,key) in componentSetOptions.dialogBut.operate">
            <!--id等于20000显示 超级管理员显示，超级管理员登录放回的是['*']-->
            <el-button
                :key="key"
                :type="itemOperate.type"
                :icon="itemOperate.icon"
                :plain="itemOperate.plain"
                :round="itemOperate.round"
                @click="HandleUtils.handleParent($parent,itemOperate.method,componentSetOptions.formRef)"
                v-if="itemOperate.id=='20000' || $store.state.routerRole.indexOf('*')!=-1"
            >
              {{ itemOperate.name }}
            </el-button>
            <!--判断权限-->
            <el-button
                :key="key"
                :type="itemOperate.type"
                :icon="itemOperate.icon"
                :plain="itemOperate.plain"
                :round="itemOperate.round"
                @click="HandleUtils.handleParent($parent,itemOperate.method,componentSetOptions.formRef)"
                v-else-if="$store.state.routerRole.indexOf(itemOperate.id)!=-1"
            >
              {{ itemOperate.name }}
            </el-button>
          </template>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['componentSetOptions'],
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    //多选框 全选 状态
    handleCheckAllChange(key) {
      let prop = this.componentSetOptions.formListProp[key];//数据源
      let field = prop.field;
      let checkAll = prop.checkAll;
      let labels = [];
      for (let i = 0; i < this.componentSetOptions[field + 'Prop'].length; i++) {
        labels.push(this.componentSetOptions[field + 'Prop'][i].value)
      }
      this.componentSetOptions.formField[field] = checkAll ? labels : [];
      prop.indeterminate = false;
      this.HandleUtils.handleParent(this.$parent, prop.changeMethod + 'FormChange', this.componentSetOptions.formField[field])
    },
    //多选框 选择时候
    handleCheckedChange(key) {
      let prop = this.componentSetOptions.formListProp[key];//数据源
      let field = prop.field;
      let number = this.componentSetOptions.formField[field].length;
      let labels = [];
      for (let i = 0; i < this.componentSetOptions[field + 'Prop'].length; i++) {
        labels.push(this.componentSetOptions[field + 'Prop'][i].value)
      }
      prop.indeterminate = number > 0 && number < labels.length;
      prop.checkAll = number === labels.length;
      this.HandleUtils.handleParent(this.$parent, prop.changeMethod + 'FormChange', this.componentSetOptions.formField[field])
    },
  },
};
</script>
<style lang="scss">
//调用titleChild组件 需要使用的class
.form-title-child {
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;

  .el-form-item__content {
    margin-left: 0 !important;
  }
}
</style>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
</style>
